<template>
	<div style="width: 100%;">
			<div style="display: flex; width: 100%;">
				<el-button size="default" type="danger" style="background-color: #E1337F;" @click="add()">
					<el-icon><Plus /></el-icon>添加</el-button>
				<div style="width: 100%;"><p style="text-align: center;">评论管理</p></div>
			</div>
			<div style="background-color: #E1337F;height: 0.1rem;"></div>	
			<el-card>
			<div style="width: 100%;">
			<el-table :data="data.remarks" border style="width: 100%">
				<el-table-column label="评论人昵称" prop="user.uname"></el-table-column>
				<el-table-column label="评论人手机号" prop="user.phone"></el-table-column>
				<el-table-column label="评论人账号" prop="user.account"></el-table-column>
				<el-table-column label="评论人头像">
					<template #default="car">
						<el-image style="width: 100px;height: 100px;"
							:src="$ip+`/public/shows/`+car.row.user.pic" />
					</template>
				</el-table-column>
				<el-table-column label="评论商品名称" prop="commodity.comname"></el-table-column>
				<el-table-column label="评论商品图片" >
					<template #default="car">
						<el-image style="width: 100px;height: 100px;"
							:src="$ip+`/public/shows/`+car.row.commodity.pic" />
					</template>
				</el-table-column>
				<el-table-column label="评论商品制造商" prop="commodity.makers"></el-table-column>
				<el-table-column label="评论商品生产日期">
					<template #default="car">
						{{mytpost(car.row.commodity.tmake)}}
					</template>
				</el-table-column>
				<el-table-column label="评价" width="155rem">
					<template #default="car">
						<el-rate
						  v-model="car.row.rate"
						  disabled
						  show-score
						  text-color="#ff9900"
						  score-template="{value}"
						/>
					</template>
				</el-table-column>
				<el-table-column label="评论内容" prop="content" width="300rem"></el-table-column>
				<el-table-column label="评论时间" >
					<template #default="car">
						{{mytpost(car.row.remdate)}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100rem">
					<template #default="car" >
					<el-button  @click="update(car.row.remid)" style="background-color: #E1337F;color: #FFFFFF;">更改</el-button>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100rem">
					<template #default="car">
					<el-button  @click="del(car.row.remid)" style="background-color: #E1337F;color: #FFFFFF;">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div style="margin-left: 35%;">
							 <el-pagination  :total="data.page.count" :page-count="myCeil(data.page.count/data.page.l)"
							 layout="jumper , prev, pager ,next ,total" @current-change="pageQuery" /> 
						  </div>
			</div>
			</el-card>
			</div>
			
			
</template>
<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen,DeleteFilled} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const data=reactive({
			remarks:[],
				
			page:{
				p:0,
				l:5,
				count:0
			}
		})
		function add(){
			router.push("/adm/addremark")
			
		}
		function update(remid){
			router.push({
				path:"/adm/addremark",
				query:{
					remid:remid
				}
			})
		}
		function del(remid){
			
			
			$get("/adm/remark/del/"+remid+"/"+data.page.p+"/"+data.page.l).then((read)=>{
				success(read.data.msg)
				data.remarks=read.data.data.remark
				data.page.count=read.data.data.count	
			})
			
		}
		const mytpost = computed(() => {
			return function(tpost) {
				console.log(tpost)
				let t = new Date(tpost)
				let yy = t.getFullYear()
				let mm = t.getMonth() + 1
				let dd = t.getDate()
				let a = yy + "年" + mm + "月" + dd + "日"
				console.log(a)
				return a
			}
		})
		
		
		function pageQuery(val=1){
			// 翻页跳转
			
			let pagenum=data.page.l*val-data.page.l
			data.page.p=pagenum
			$get("/adm/remark/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.remarks=read.data.data.remark
				data.page.count=read.data.data.count				
			})
			
			}
		const myCeil = computed(() => {
				return function(a) {
					var s= Math.ceil(a)
					return s
				}
			})
		
		
		onMounted(()=>{
			$get("/adm/remark/findAll/"+data.page.p+"/"+data.page.l).then((read)=>{
				data.remarks=read.data.data.remark
				data.page.count=read.data.data.count				
			})
			
			
		})
</script>

<style>
</style>
